<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>进制转换计算器</title>
  <style>
    /* CSS样式 */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      padding: 20px;
    }
    .container {
      max-width: 1200px; /* 设置最大宽度 */
      margin: 0 auto; /* 水平居中 */
      background-color: #fff; /* 设置背景颜色 */
      padding: 20px;
      border-radius: 8px; /* 设置圆角边框 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
    }
    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    input[type="radio"] {
      margin-right: 5px;
    }
    button {
      padding: 10px 20px;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    #result {
      margin-top: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>进制转换计算器</h2>
    <input type="text" id="inputNumber" placeholder="请输入一个数字（十六进制或十进制）">
    <br>
    <input type="radio" id="decimal" name="conversionType" value="decimal" checked>
    <label for="decimal">转换为十进制</label>
    <input type="radio" id="hex" name="conversionType" value="hex">
    <label for="hex">转换为十六进制</label>
    <br>
    <button onclick="convertNumber()">转换</button>
    <p id="result"></p>
  </div>
  <script>
    function convertNumber() {
      const inputNumber = document.getElementById('inputNumber').value;
      const conversionType = document.getElementById('decimal').checked ? 'decimal' : 'hex';
      let result;
      if (inputNumber.includes('/')) {
        const parts = inputNumber.split('/');
        if (parts.length === 2) {
          const part1 = parseInt(parts[0], 10);
          const part2 = parseInt(parts[1], 10);
          if (!isNaN(part1) && !isNaN(part2)) {
            result = combineNumbers(part1, part2, conversionType);
          } else {
            document.getElementById('result').innerText = `输入错误，请输入有效的数字或数字/数字格式`;
            return;
          }
        } else {
          document.getElementById('result').innerText = `输入错误，请输入有效的数字或数字/数字格式`;
          return;
        }
      } else {
        if (conversionType === 'decimal') {
          if (!/^[0-9A-Fa-f]+$/.test(inputNumber)) {
            document.getElementById('result').innerText = `输入错误，请输入十六进制数字或数字/数字格式`;
            return;
          }
          result = parseInt(inputNumber, 16);
        } else {
          if (isNaN(inputNumber)) {
            document.getElementById('result').innerText = `输入错误，请输入十进制数字或数字/数字格式`;
            return;
          }
          result = parseInt(inputNumber, 10).toString(16).toUpperCase();
        }
      }
      document.getElementById('result').innerText = `转换结果: ${result}`;
    }

    function combineNumbers(high, low, type) {
      if (type === 'decimal') {
        return (high * Math.pow(2, 32)) + low;
      } else {
        const combinedDecimal = (high * Math.pow(2, 32)) + low;
        return combinedDecimal.toString(16).toUpperCase();
      }
    }
  </script>
</body>
</html>
